<template>
	<view class="uni_box home">
	  <navbar :title="title"> </navbar>
	  <view class="content">
		<view class="yilist" v-if="info.content">
		  <text class="tit">{{$t('i.guanyu')}}</text>
		  <view class="guanyu">
			<u-parse :html="info.content"></u-parse>
		  </view>
		</view>
		<view class="yilist">
		  <text class="tit">{{$t('i.guanyu')}}</text>
		  <view class="lianxi">
			<view class="lianitem" v-if="info.mobile">
			  <view class="lianone">
				{{$t('i.guanyu')}}:{{ info.mobile }}

				<text class="boda" @click="getphone">{{$t('i.boda')}}</text>
			  </view>
			</view>
			<view class="lianitem" v-if="info.email">
			  <view class="lianone">
				{{$t('i.guanyu')}}:{{ info.email }}
				<text class="boda" @click="copy(info.email)">{{$t('i.fuzhi')}}</text>
			  </view>
			</view>
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		phone:'',
		border:false,
		info:{}
	  };
	},
	onLoad() {
	  this.getxinxi();
	},
	onShow() {},
	computed: {
		title(){
			return this.$t('i.guanyu')
		},
	},
	methods: {
	  async getxinxi(){
		let res = await this.$u.api.about({
		});
		this.info = res
	  },
	  getphone(){
		uni.makePhoneCall({
			phoneNumber: this.info.mobile //仅为示例
		});
	  }
	},
  };
  </script>
  
  <style lang="scss" scoped>
  
  .content {
	// background-color: #070808;
	min-height: 100vh;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	.yilist{
	  margin-bottom: 40rpx;
	  .tit{
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	  }
	  .guanyu{
		padding: 30rpx;
		// background: #eee;
		border: 1rpx solid #eee;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333;
		line-height: 50rpx;
	  }
	  .lianxi{
		display: flex;
		flex-direction: column;
		.lianitem{
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  
		  width: 100%;
		  .name{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		  }
		  .lianone{
			width: 100%;
			padding: 30rpx 15rpx;
			border: 1rpx solid #eee;
			// background: #22242C;
			border-radius: 24rpx;
			margin-bottom: 30rpx;
			position: relative;
			.boda{
				padding: 6rpx 20rpx;
				border-radius: 5rpx;
				color:  #8A1596;
				border: 1rpx solid  #8A1596;
				display: inline-block;
				margin-left: 30rpx;
				font-weight: 500;
				font-size: 28rpx;
			}
			.lianoneimg{
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  border-radius: 24rpx;
			}
		  }
		}
		.lianitem:nth-child(even){
		  margin-left: auto;
		}
	  }
	}  
  }
  </style>
  